<template>
    <el-input
            v-if="maxlength > 0"
            :maxlength="maxlength"
            :disabled="disabled" size="mini" :placeholder="placeholder" :class="cls" v-model="inputValue" :type="type" @change="changeInput" :rows="rows" />
    <el-input
            v-else
            :disabled="disabled" size="mini" :placeholder="placeholder" :class="cls" v-model="inputValue" :type="type" @change="changeInput" :rows="rows" />
</template>
<script>
    export default {
        name: 'common-input',
        data() {
            return {
                inputValue: ""
            }
        },
        created() {
            if(this.value) {
                this.setValue(this.value)
            }
        },
        props: {
            value: [String, Number],
            disabled: {
                type: Boolean
            },
            placeholder: {
                type: String
            },
            cls: {
                type: String
            },
            type: {
                type: String,
                default: "text"
            },
            rows: {
                type: Number,
                default: 4
            },
            maxlength: {
                type: [String, Number],
                default: 0
            },
            fieldType: {
                type: String,
                default: "text"
            }
        },
        watch: {
            value(val) {
                this.setValue(val)
            }
        },
        methods: {
            changeInput() {
                this.inputValue = $.trim(this.inputValue)
                var unified_emoji_ranges = [
                    '\ud83c[\udf00-\udfff]', // U+1F300 to U+1F3FF
                    '\ud83d[\udc00-\ude4f]', // U+1F400 to U+1F64F
                    '\ud83d[\ude80-\udeff]'  // U+1F680 to U+1F6FF
                ];

                var reg = new RegExp(unified_emoji_ranges.join('|'), 'g');
                this.inputValue = this.inputValue.replace(reg, "");

                if(this.fieldType == "integer" || this.fieldType == "decimal" || this.fieldType == "alphanum") {
                    var pattern= '';
                    if(this.fieldType == "integer") {
                        pattern = /[^0-9]/ig;
                    } else if(this.fieldType == "decimal") {
                        pattern = /[^0-9.]/ig;
                    } else if(this.fieldType == "alphanum") {
                        pattern = /[^0-9a-zA-Z]/ig;
                    }
                    this.inputValue = this.inputValue.replace(pattern, "");
                }
                // var pattern=/[`~!@#$^&*()=|{}':;',\\\[\]<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？]/g;
                // if(this.fieldType == "businessHours") {
                //     pattern=/[`~!@#$^&*()=|{}';',\\\[\]<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？]/g;
                // } else if(this.fieldType == "integer") {
                //     pattern = /[^0-9]/ig;
                // } else if(this.fieldType == "decimal") {
                //     pattern = /[^0-9.]/ig;
                // } else if(this.fieldType == "chinese") {
                //     pattern = /[^0-9.]/ig;
                // } else if(this.fieldType == "url") {
                //     pattern = /[^0-9a-zA-Z-_:\/?.#=]/ig;
                // }
                // this.inputValue = this.inputValue.replace(pattern, "");
                this.$emit('input', this.inputValue);
                this.$emit('change');
            },
            setValue(val) {
                this.inputValue = val;
            }
        }
    }
</script>